Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Chips
We can use the v-chip component to add a chip.
It conveys a small piece of information.
The close prop lets the chip become interactive.
To add one, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip class="ma-2" color="primary">Primary</v-chip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add the v-chip component with the color prop to change the color.
Icon
We can add an icon inside the chip.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip class="ma-2" color="indigo" text-color="white">
<v-avatar left>
<v-icon>mdi-account-circle</v-icon>
</v-avatar>James
</v-chip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We add a v-avatar component with a v-icon inside.
Then we’ll see the icon to the left of the text.
Outlined
The outlined prop will make the chip display with an outline.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip class="ma-2" color="success" outlined>
<v-icon left>mdi-server-plus</v-icon>Status
</v-chip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Now we’ll see a white background with a border on the chip.
Label
We can make the chip border-radius less round to make a label.
The label prop will adjust the border-radius to be less round:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip class="ma-2" color="pink" label text-color="white">
<v-icon left>mdi-label</v-icon>Tags
</v-chip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Sizes
We can have various sizes with the v-chip component.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip class="ma-2" x-small>x-small</v-chip>
<v-chip class="ma-2" small>small</v-chip>
<v-chip class="ma-2">Default</v-chip>
<v-chip class="ma-2" large>large</v-chip>
<v-chip class="ma-2" x-large>x-large</v-chip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the x-small , small , large and x-large props to change the chip size.
Filter
The filter prop lets us show an additional icon if it’s active.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip class="ma-2" :input-value="active" filter filter-icon="mdi-minus">chip</v-chip>
<v-switch v-model="active" label="Active"></v-switch>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
active: false,
}),
};
</script>
We have the v-chip component with the input-value prop.
When it’s true , then we show an extra icon with the filter prop.
filter-icon lets us set the icon to show with active is true .
Conclusion
We can add chips to show small amounts of information.
The icon can be shown and toggled.
